<style scoped>
.one .form2 >>> .van-dropdown-menu__bar {
  box-shadow: 0 0 transparent;
}
.one .wrap {
  text-align: center;
  margin: 10px;
}
.one .updata {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.one .wrap .box {
  width: 22vw;
  height: 60px;
  border: 1px dashed var(--hui);
  line-height: 60px;
  font-size: 20px;
  margin: 6px;
  color: var(--hui);
}
.one .wrap > p {
  margin-top: 15px;
  font-size: 12px;
}
.one .preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}
</style>
<template>
  <div class="one fixed">
    <van-nav-bar title="司机注册" left-arrow @click-left="clickLeft" />
    <van-steps :active="active" active-color="#ff6600">
      <!-- @click-step="clickStep" -->
      <van-step>个人信息</van-step>
      <van-step>车辆信息</van-step>
      <van-step>照片信息</van-step>
    </van-steps>
    <transition name="van-slide-left" mode="out-in">
      <div v-if="active == 0" class="form1" key="form1">
        <van-cell-group>
          <van-field
            label="所有城市"
            :value="form1.city"
            placeholder="请选择城市"
            readonly
            @click="showArea = true"
            right-icon="arrow"
          />
          <van-field
            label="真实姓名"
            v-model="form1.name"
            placeholder="如:李国民"
          />
          <van-field
            label="身份证号码"
            :value="form1.IDNum"
            maxlength="18"
            placeholder="如:383736258567463527"
            @touchstart.native.stop="IDNumberOff = true"
          />
          <van-field
            label="紧急联系人"
            v-model="form1.emergencyContact"
            placeholder="请输入紧急联系人姓名"
          />
          <van-field
            label="紧急联系人电话"
            label-width="100px"
            maxlength="11"
            v-model="form1.emergencyContactPhone"
            placeholder="请输入紧急联系人的电话"
          />
          <van-button
            style="width: 93%; margin: 0 auto"
            type="primary"
            color="#ff6600"
            block
            @click="form1ClickNext"
            >下一步</van-button
          >
        </van-cell-group>
      </div>
      <div v-if="active == 1" class="form2" key="form2">
        <van-cell-group>
          <van-field label="车辆类型" center>
            <template #input>
              <van-dropdown-menu overlay>
                <van-dropdown-item v-model="form2.carType" :options="option1" />
              </van-dropdown-menu>
            </template>
          </van-field>
          <van-field
            label="准驾车型"
            v-model="form2.QuasiDrivingType"
            placeholder="请输入准驾车型,如C1"
          />
          <van-field
            label="车辆号码"
            v-model="form2.carID"
            placeholder="请输入车辆号码,如冀J4D321"
          />
          <van-button
            style="width: 93%; margin: 0 auto"
            type="primary"
            color="#ff6600"
            block
            @click="form1ClickNext"
            >下一步</van-button
          >
        </van-cell-group>
      </div>
      <div v-if="active == 2" class="form3" key="form3">
        <van-cell-group class="updata">
          <!-- 身份证照片 -->
          <van-uploader
            :after-read="afterRead"
            v-model="form3.identityCard"
            multiple
            name="身份证照片"
            :max-count="1"
            accept="image/png, image/jpeg"
            capture
          >
            <div class="wrap">
              <div class="box">+</div>
              <p>身份证照片</p>
            </div>
            <template #preview-cover="{ file }">
              <div class="preview-cover van-ellipsis">{{ file.name }}</div>
            </template>
          </van-uploader>
          <!-- 手持身份证照片 -->
          <van-uploader
            :after-read="afterRead"
            v-model="form3.handInIdentityCard"
            multiple
            name="手持身份证照片"
            :max-count="1"
            accept="image/png, image/jpeg"
            capture
          >
            <div class="wrap">
              <div class="box">+</div>
              <p>手持身份证照片</p>
            </div>
            <template #preview-cover="{ file }">
              <div class="preview-cover van-ellipsis">{{ file.name }}</div>
            </template>
          </van-uploader>
          <!-- 驾驶证照片 -->
          <van-uploader
            :after-read="afterRead"
            v-model="form3.drivingLicence"
            multiple
            name="驾驶证照片"
            :max-count="1"
            accept="image/png, image/jpeg"
            capture
          >
            <div class="wrap">
              <div class="box">+</div>
              <p>驾驶证照片</p>
            </div>
            <template #preview-cover="{ file }">
              <div class="preview-cover van-ellipsis">{{ file.name }}</div>
            </template>
          </van-uploader>
          <!-- 行驶证照片 -->
          <van-uploader
            :after-read="afterRead"
            v-model="form3.drivingLicence2"
            multiple
            name="行驶证照片"
            :max-count="1"
            accept="image/png, image/jpeg"
            capture
          >
            <div class="wrap">
              <div class="box">+</div>
              <p>行驶证照片</p>
            </div>
            <template #preview-cover="{ file }">
              <div class="preview-cover van-ellipsis">{{ file.name }}</div>
            </template>
          </van-uploader>
          <!-- 车辆侧面照片 -->
          <van-uploader
            :after-read="afterRead"
            v-model="form3.carSidePhoto"
            multiple
            name="车辆侧面照片"
            :max-count="1"
            accept="image/png, image/jpeg"
            capture
          >
            <div class="wrap">
              <div class="box">+</div>
              <p>车辆侧面照片</p>
            </div>
            <template #preview-cover="{ file }">
              <div class="preview-cover van-ellipsis">{{ file.name }}</div>
            </template>
          </van-uploader>
          <van-button
            style="width: 93%; margin: 0 auto"
            type="primary"
            color="#ff6600"
            block
            @click="commit"
            >确定提交</van-button
          >
          <!-- :disabled="
              form3.identityCard[0] &&
              form3.handInIdentityCard[0] &&
              form3.drivingLicence[0] &&
              form3.drivingLicence2[0] &&
              form3.carSidePhoto[0]
                ? false
                : true
            " -->
        </van-cell-group>
      </div>
    </transition>
    <!-- 输入身份证号码弹框 -->
    <van-number-keyboard
      v-model="form1.IDNum"
      :show="IDNumberOff"
      extra-key="X"
      close-button-text="完成"
      @blur="IDNumberOff = false"
    />
    <!-- 省市区选择器 -->
    <van-popup v-model="showArea" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="onConfirm"
        @cancel="showArea = false"
      />
    </van-popup>
  </div>
</template>

<script>
import areaList from "../../assets/area/area_list";
import {Toast} from 'vant';
export default {
  data: () => ({
    active: 0, //进度条状态0-2
    IDNumberOff: false, //身份号码键盘开关
    showArea: false, //表单项类型 - 省市区选择器开关
    areaList: {}, //城市列表
    form1: {
      city: "", //城市
      name: "", //名字
      IDNum: "", //身份证号码
      emergencyContact: "", //紧急联系人
      emergencyContactPhone: "", //紧急联系人电话
    },
    form2: {
      carType: 0,
      QuasiDrivingType: "",
      carID: "",
    },
    form3: {
      identityCard: [], //身份证照片
      handInIdentityCard: [], //手持身份证照片
      drivingLicence: [], //驾驶证照片
      drivingLicence2: [], //行驶证照片
      carSidePhoto: [], //车辆侧面照片
    },

    option1: [
      { text: "小面包车", value: 0 },
      { text: "中面包车", value: 1 },
      { text: "小面包车", value: 2 },
      { text: "其他类型", value: 3 },
    ],
  }),
  created() {
    this.areaList = areaList;
  },
  methods: {
    commit() {
      let { form1, form2, form3 } = this;
      let phone = {};
      for (let attr in form3) {
        phone[attr] = form3[attr][0];
      }
      console.log({ ...form1, ...form2, phone });
      Toast.success('提交成功,等待审核');
      setTimeout(()=>{
          this.$router.push('/login');
      },1000)
    },
    form1ClickNext() {
      this.active += 1;
    },
    afterRead(file, detail) {
      file.status = "uploading";
      file.message = "上传中...";
      file.previewSize = "30vw";
      console.log(detail);
      setTimeout(() => {
        file.status = "done";
        file.message = "上传成功!";
        file.previewSize = "30vw";
        file.name = detail.name;
      }, 1000);
    },
    onConfirm(values) {
      this.form1.city = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      this.showArea = false;
    },
    // clickStep(i) {
    //   this.active = i;
    // },
    clickCity() {
      console.log("clickCity");
    },
    clickLeft() {
      console.log("left");
      this.$router.push({ name: "dri_reg" });
    },
  },
};
</script>